<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">
<dom-module id="loading-demo">
  <template>
    <style>
      :host{
        display: block;
      }
    </style>
    <template is="dom-if" if="{{isLoading}}">
        <div>正在加载中...</div>
    </template>
    <template is="dom-if" if="{{!isLoading}}">
        <div>正式的页面</div>
    </template>
  </template>

  <script>
    /**
     * @LoadingDemo
     * @polymer
     */
    class LoadingDemo extends Polymer.Element {
      static get is() { return 'loading-demo'; }
      constructor(){
          super();
          this.isLoading = true;
      }
      async ready(){
        super.ready();
        await this.getDataFromRemote();
        this.isLoading = false;
      }
      getDataFromRemote(){
        return new Promise(function(resolve, reject){
            setTimeout(()=>{
                resolve(1);
            }, 1000)
        });
      }
    }
    window.customElements.define(LoadingDemo.is, LoadingDemo);

  </script>
</dom-module>


